import echarts from 'echarts' //引入echarts
function index2() {
    /* 柱状图&&折线图 */
    var myChart = echarts.init(document.getElementById('bar-line'));
    var myChart1 = echarts.init(document.getElementById('hudai_map'));
    var myChart2 = echarts.init(document.getElementById('xinyong'));
    var myChart3 = echarts.init(document.getElementById('fengxianjinMap'));
    var option = {
        grid: {
            x: 55,
            y: 25,
            x2: 60,
            y2: 35,
            borderWidth: 1,
        },
        xAxis: [{
            type: 'category',
            data: ['低保', '五保', '一般'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#045d90',
                    width: 2,
                }
            },
            axisTick: {
                show: false
            }
        }],
        yAxis: [{
                type: 'value',
                // name: '户数',
                min: 0,
                max: 3000,
                interval: 1000,
                axisLabel: {
                    formatter: '{value} 户',
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.35vw'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#045d90',
                        width: 2,
                    }
                },
                splitNumber: 3,
                axisTick: {
                    show: false
                }
            },
            // {
            //     type: 'value',
            //     name: '人数',
            //     min: 0,
            //     max: 3000,
            //     interval: 1000,
            //     axisLabel: {
            //         formatter: '{value} 人',
            //         textStyle: {
            //             color: '#fff'
            //         }
            //     },
            //     axisLine: {
            //         lineStyle: {
            //             color: '#045d90',
            //             width: 2,
            //         }
            //     },
            //     axisTick: {
            //         show: false
            //     }
            // }
        ],
        series: [{
                // name: '户数',
                name: '',
                type: 'bar',
                data: [1000, 1000, 2000],
                itemStyle: {
                    normal: {
                        color: function(params) {
                            var colorList = ['#07aaff', '#7cf102', '#ffd200'];
                            return colorList[params.dataIndex]
                        }
                    }
                }
            },
            {
                name: '人数',
                type: 'line',
                data: [2000, 2000, 2888],
                itemStyle: {
                    normal: {
                        color: '#07aaff',
                        lineStyle: {
                            color: '#07aaff'
                        }
                    }
                }
            }
        ]
    }
    myChart.setOption(option);
    myChart1.setOption(option);
    myChart2.setOption(option);
    myChart3.setOption(option);
    clearInterval(tt)
    var tt = setInterval(function() {
        myChart && myChart.clear();
        myChart && myChart.setOption(option);
        myChartLoop && myChartLoop.clear();
        myChartLoop && myChartLoop.setOption(optionLoop);
        myChartBar && myChartBar.clear();
        myChartBar && myChartBar.setOption(optionBar);
        myChartPie && myChartPie.clear();
        myChartPie && myChartPie.setOption(optionPie);
    }, 1000 * 5)

    /* 环形图 */
    var myChartLoop = document.getElementById('loop') && echarts.init(document.getElementById('loop'));
    var optionLoop = {
        grid: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 0,
            borderWidth: 0
        },
        /*tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },*/
        series: [{
            name: '贫困类别',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '20',
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#07aaff', '#7cf102', '#ffd200'];
                        return colorList[params.dataIndex]
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 222, name: '低保贫困户' },
                { value: 333, name: '五保贫困户' },
                { value: 111, name: '一般贫困户' }
            ]
        }]
    };
    myChartLoop.setOption(optionLoop);
    /* 横向柱状图 */
    var myChartBar = echarts.init(document.getElementById('cross-bar'));
    var optionBar = {
        grid: {
            x: 56,
            y: 0,
            x2: 20,
            y2: 30,
            borderWidth: 0
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
            min: 0,
            max: 1000,
            interval: 200,
            axisLine: {
                lineStyle: {
                    color: '#045d90',
                    width: 2,
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: ['因灾', '缺资金', '缺技术', '因学致贫', '自身发展', '因缺劳力', '因残致贫', '因病致贫'],
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#045d90',
                    width: 2,
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [{
            type: 'bar',
            data: [188, 88, 66, 444, 333, 524, 555, 422],
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#d87413', '#2061c0', '#0072cb', '#9439d7', '#d1656a', '#d1af06', '#66c807', '#07b1d7'];
                        return colorList[params.dataIndex]
                    }
                }
            }
        }]
    };
    myChartBar.setOption(optionBar);
    /* 饼状图 */
    var myChartPie = echarts.init(document.getElementById('pie'));
    var myChartPie2 = echarts.init(document.getElementById('xindaifuwu'));
    var optionPie = {
        grid: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 0,
            borderWidth: 0
        },
        series: [{
            name: '致贫原因',
            type: 'pie',
            radius: [0, '90%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            selectedOffset: 10,
            data: [
                { value: 655, name: '因病致贫' },
                { value: 777, name: '因残致贫' },
                { value: 888, name: '因缺劳力' },
                { value: 966, name: '自身发展动力不足' },
                { value: 1100, name: '因学致贫' },
                { value: 1222, name: '缺技术、缺资金、因灾' },
            ],
            label: {
                normal: {
                    // position: 'inner', //内置文本标签
                    formatter: '',
                }
            },
            labelLine: {
                normal: {
                    show: false //不需要设置引导线
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                    color: function(params) {
                        var colorList = ['#07b1d7', '#66c807', '#d1af06', '#d1656a', '#9439d7', '#0072cb'];
                        return colorList[params.dataIndex]
                    }
                }
            }
        }]
    };
    myChartPie.setOption(optionPie);
    myChartPie2.setOption(optionPie);

    //各种信息滚动
    function autoScroll(obj, divHeight) {
        var $parent = $(obj).find("ul");
        var $first = $parent.find('li:first');
        $first.animate({
            height: 0
        }, 500, function() {
            $first.css('height', divHeight).appendTo($parent);
        });
    }
    var msgQh;
    var logQh;
    var measuresQh;
    var leaderQh;
    clearInterval(msgQh);
    clearInterval(logQh);
    clearInterval(measuresQh);
    clearInterval(leaderQh);
    $(function() {
            //脱贫信息
            var ulHeight = $('.js-slide-list').height();
            var dataNum = $('.js-slide-list li').length;
            var dataHeight = $('.js-slide-list li').height() * dataNum;
            clearInterval(msgQh);
            if (ulHeight < dataHeight) {
                clearInterval(msgQh);
                msgQh = setInterval('autoScroll(".slide-container","2.11vh")', 3000);
                $('.js-slide-list').mouseenter(function() {
                    clearInterval(msgQh);
                    msgQh = null;
                }).mouseleave(function() {
                    clearInterval(msgQh);
                    msgQh = setInterval('autoScroll(".slide-container","2.11vh")', 3000);
                })
            }
            //干部提交日志信息
            var ulHeightLog = $('.js-log-list').height();
            var dataNumLog = $('.js-log-list li').length;
            var dataHeightLog = $('.js-log-list li').height() * dataNumLog;
            clearInterval(logQh);
            if (ulHeightLog < dataHeightLog) {
                clearInterval(logQh);
                logQh = setInterval('autoScroll(".slide-log-container","6.79vh")', 3000);
                $('.js-log-list').mouseenter(function() {
                    clearInterval(logQh);
                    logQh = null;
                }).mouseleave(function() {
                    clearInterval(logQh);
                    logQh = setInterval('autoScroll(".slide-log-container","6.79vh")', 3000);
                })
            }
            //左侧帮扶措施
            var ulHeightMeasures = $('.js-measures-list').height();
            var dataNumMeasures = $('.js-measures-list li').length;
            var dataHeightMeasures = $('.js-measures-list li').height() * dataNumMeasures;
            clearInterval(measuresQh);
            if (ulHeightMeasures < dataHeightMeasures) {
                clearInterval(measuresQh);
                measuresQh = setInterval('autoScroll(".measuresList","2.05vh")', 3000);
                $('.js-measures-list').mouseenter(function() {
                    clearInterval(measuresQh);
                    measuresQh = null;
                }).mouseleave(function() {
                    clearInterval(measuresQh);
                    measuresQh = setInterval('autoScroll(".measuresList","2.05vh")', 3000);
                })
            }

            //中间联户帮扶干部
            var ulHeightLeader = $('.leaderList').height();
            var dataNumLeader = $('.leaderList li').length;
            var dataHeightLeader = $('.leaderList li').height() * dataNumLeader;
            clearInterval(leaderQh);
            if (ulHeightLeader < dataHeightLeader) {
                clearInterval(leaderQh);
                leaderQh = setInterval('autoScroll(".leaderList","1.9vh")', 3000);
            }
        })
        /* 致贫原因&&贫困类别 */
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiperTypePage',
        paginationClickable: true,
        autoplay: 10 * 1000,
        autoplayDisableOnInteraction: false,
        onSlideChangeEnd: function(swiper) {
            var eq = swiper.activeIndex;
            if (eq === 0) {
                $('#chartTitle').text('贫困类别');
            } else if (eq === 1) {
                $('#chartTitle').text('致贫原因');
            }
        }
    });
    $('.swiper-container').mouseenter(function() {
            swiper.stopAutoplay();
        }).mouseleave(function() {
            swiper.startAutoplay();
        })
        /* 联户帮扶干部 */
    $(function() {
        $('.leaderLog').liMarquee({
            direction: 'up',
            scrollamount: 20,
            runshort: false
        });
    });

    /* 是否显示村地图侧栏 */
    $('#ifShowMap').on('click', function() {
            var flag = $(this).attr('data-flag');
            if (flag == 'show') {
                $('.mapRight').animate({ right: '-18.304vw' });
                $(this).attr('data-flag', 'hide').text('<');
            } else {
                $('.mapRight').animate({ right: '0.104vw' });
                $(this).attr('data-flag', 'show').text('>');
            }
        })
        //定时展开村地图侧栏
    setTimeout(function() {
        $('.mapRight').animate({ right: '0.104vw' });
        $('.ifShowMap').fadeIn();
        $('.ifShowMap').attr('data-flag', 'show').text('>');
    }, 10 * 1000)

    /* 贫困户信息照片自动切换 */
    var swiperPhoto = new Swiper('.swiper-photo', {
        autoplay: 3 * 1000,
        autoplayDisableOnInteraction: false,
    });


    /* 模块切换 */
    var blockQh = false;
    var qiehuan = function() {
        var qhFlag = $('.ifPoverty').attr('flag');
        if (qhFlag == 'true') {
            $('.ifPoverty').hide();
            $('#tuopinyouyin').fadeIn();
            $('.ifPoverty').attr('flag', 'false');
            /* 脱贫有印时间轴 */
            $('.timeLineOut').liMarquee({
                direction: 'up',
                scrollamount: 20,
                runshort: false
            });
            /* 脱贫有印照片切换 */
            var recordSwiper = new Swiper('.swiper-record', {
                pagination: '.recordSwiperPage',
                paginationClickable: true,
                autoplay: 3 * 1000,
                autoplayDisableOnInteraction: false,
            });
        } else {
            $('.ifPoverty').fadeIn();
            $('#tuopinyouyin').hide();
            $('.ifPoverty').attr('flag', 'true');
            $('.timeLineOut').liMarquee('destroy'); //销毁滚动
        }
    }
    clearInterval(blockQh);
    blockQh = setInterval(function() { qiehuan() }, 1000 * 10);
    $('.qhFlag').mouseenter(function() {
        clearInterval(blockQh);
        blockQh = null;
    }).mouseleave(function() {
        clearInterval(blockQh);
        blockQh = setInterval(function() { qiehuan() }, 1000 * 10);
    })

    $('.measureBox a').click(function() {
        $('.measureBox').fadeOut();
        $('.measuresList').fadeIn();
    })
    $('#js-measures-list>li>a').on('click', function() {
        $('.measuresList').fadeOut();
        $('.industryOutOfPoverty_3content').fadeIn();
    })
    $('#toBack').bind('click', function() {
        $('.measureBox').fadeIn();
        $('.measuresList').fadeOut();
    })
    $('#toBac_list').bind('click', function() {
        $('.measuresList').fadeIn();
        $('.industryOutOfPoverty_3content').fadeOut();
    })


    /* 行业脱贫---模块切换 */
    var boxQh = false;
    var boxShow = function() {
        var qhFlag = $('.hytp').attr('data-tag');
        if (qhFlag == 'show') {
            $('.hytp').hide();
            $('.djfp').fadeIn();
            $('.hytp').attr('data-tag', 'hide');
            /* 党建引领精准扶贫照片切换 */
            var partySwiper = new Swiper('.swiper-party', {
                pagination: '.recordSwiperPage',
                paginationClickable: true,
                autoplay: 3 * 1000,
                autoplayDisableOnInteraction: false,
            });
            $('.qhTitle').text('党建引领精准扶贫');
        } else {
            $('.hytp').fadeIn();
            $('.djfp').hide();
            $('.hytp').attr('data-tag', 'show');
            $('.qhTitle').text('行业脱贫');
            // $('.timeLineOut').liMarquee('destroy');     //销毁滚动
        }
    }
    clearInterval(boxQh);
    boxQh = setInterval(function() { boxShow() }, 1000 * 10);
    $('.qhWrap .content').mouseenter(function() {
        clearInterval(boxQh);
        boxQh = null;
    }).mouseleave(function() {
        clearInterval(boxQh);
        boxQh = setInterval(function() { boxShow() }, 1000 * 10);
    })

    $(".popup").click(function() {
        $(".show").hide();
        $(this).hide();
    });

    function showPhoto(element) {
        /* 点击照片小图预览 */
        $(element).on('click', function() {
            $(".show").empty();
            $(".popup").show();
            $(".show").show();
            var imgSrc = $(this).attr("src"); //获取点击图片的地址
            var imgLength = imgSrc.length;
            var bigImg = imgSrc.substr(0, imgLength - 5) + imgSrc.substr(imgLength - 4);
            $(".show").prepend("<img class=\"big\" onerror=\"javascript:this.src='" + imgSrc + "'\" src=\"" + bigImg + "\"/>");
        });
    }
    showPhoto('.familyImg img');
    showPhoto('.leaderPhoto img');
    showPhoto('.swiper-party img');
}
export {
    index2
}